<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="结算银行账户"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    >
    </uni-nav-bar>
    <view class="content-wrapper">
      <!-- 银行卡展示 -->
      <view class="bank-card">
        <view class="card-header">
          <view class="bank-name">中国农业银行</view>
          <view class="account-type-tag">对私账户</view>
        </view>
        <view class="card-number">6228 **** **** *** 3172</view>
      </view>

      <!-- 申请换绑按钮 -->
      <view class="apply-btn" @click="handleApplyChange">
        <text class="apply-btn-text">申请换绑</text>
      </view>

      <!-- 申请记录 -->
      <view class="apply-records">
        <view class="records-header">
          <text class="records-title">申请记录</text>
        </view>
        <view class="records-notice">
          <text class="notice-text"
            >若审核中状态无法正常结算，请联系客服处理</text
          >
        </view>

        <!-- 空状态 -->
        <view class="empty-state">
          <view class="empty-icon">
            <image
              src="/static/images/empty-record.png"
              class="empty-image"
              mode="aspectFit"
            />
          </view>
          <text class="empty-text">暂无数据~</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 申请换绑
const handleApplyChange = () => {
  uni.showToast({
    title: "申请换绑功能开发中",
    icon: "none",
  });
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content-wrapper {
  padding: 20rpx 30rpx;
}

// 银行卡样式
.bank-card {
  background: #f9df93;
  border-radius: 16rpx;
  padding: 50rpx 40rpx;
  margin-top: 30rpx;
  box-shadow: 0 8rpx 24rpx rgba(255, 215, 0, 0.3);
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: -50rpx;
    right: -50rpx;
    width: 200rpx;
    height: 200rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: -30rpx;
    left: -30rpx;
    width: 150rpx;
    height: 150rpx;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60rpx;
  position: relative;
  z-index: 1;
}

.bank-name {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
}

.account-type-tag {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: #fff;
  font-weight: 500;
}

.card-number {
  font-size: 40rpx;
  color: #333;
  font-weight: 700;
  letter-spacing: 4rpx;
  position: relative;
  z-index: 1;
}

// 申请换绑按钮
.apply-btn {
  background-color: #fac002;
  border-radius: 12rpx;
  margin-top: 40rpx;
  padding: 28rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;

  &:active {
    opacity: 0.8;
  }
}

.apply-btn-text {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
}

// 申请记录
.apply-records {
  margin-top: 40rpx;
}

.records-header {
  margin-bottom: 20rpx;
}

.records-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
}

.records-notice {
  background-color: #fff;
  padding: 24rpx 30rpx;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
}

.notice-text {
  font-size: 24rpx;
  color: #999;
  line-height: 1.6;
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-icon {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff9e6 0%, #fff4cc 100%);
  border-radius: 50%;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200rpx;
    height: 200rpx;
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  }

  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120rpx;
    height: 80rpx;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 45%,
      #ffd700 45%,
      #ffd700 55%,
      transparent 55%,
      transparent 100%
    );
  }
}

.empty-image {
  width: 100%;
  height: 100%;
  opacity: 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>
